<template>
  <div class="booking container">
    <div class="title">
      <i class="iconfont icon-yuyuezhuanjia"></i>
      <span>门诊服务</span>
    </div>
    <div class="big">
      <div class="booking">
        <div class="wenzi">
          <h2>预约挂号</h2>
          <h6 class="p">在线挂号预约</h6>
        </div>
        <i class="iconfont icon-yuyue"></i>
      </div>
      <div class="pay">
        <div class="wenzi">
          <h4>在线充值</h4>
          <h6>诊卡预约充值</h6>
        </div>
        <i class="iconfont icon-zhifudingjin"></i>
      </div>
    </div>
  <div class="more">
      <div class="zi" v-for="(item, index) in icons" :key="index" :style="getIconStyle(item.iconColor)">
        <i :class="item.iconClass"></i>
        <span>{{ item.label }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
const icons = [
  { iconClass: "iconfont icon-menzhenpaiban", label: "候诊查询", iconColor: "#ffcc00" },
  { iconClass: "iconfont icon-tubiao_-1", label: "自助缴费", iconColor: "#66ccff" },
  { iconClass: "iconfont icon-zhifudingjin", label: "门诊费用", iconColor: "#ff9966" },
  { iconClass: "iconfont icon-kuaijiezhifu", label: "在线退款", iconColor: "#cc99ff" },
  { iconClass: "iconfont icon-yishengpaibanchaxun", label: "报告查询", iconColor: "#99cc66" },
  { iconClass: "iconfont icon-yuyuedingdan", label: "病历查询", iconColor: "#ff6666" },
  { iconClass: "iconfont icon-tubiao-qiapian", label: "核酸检测", iconColor: "#ffb366" },
  { iconClass: "iconfont icon-icon-test14", label: "体验服务", iconColor: "#2ed477" },
];
const getIconStyle = (color) => ({ color });
</script>

<style lang="scss" scoped>
@import "@/assets/style/variable.scss";
.booking {
  .title {
    display: flex;
    justify-self: start;
    align-items: center;
    height: 37px;

    i {
      margin-right: 10px;
      color: #006eff;
    }
  }

  .big {
    height: 35%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .booking,
    .pay {
      border-radius: 5px;
      height: 80%;
      width: 48%;
      background-color: rgba(251, 225, 225, 0.7);
      display: flex;
      color: rgba(244, 99, 99, 0.988235294117647);
      align-items: center;

      .wenzi {
        height: 80%;
        flex: 7;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        h4,
        h6 {
          height: 30%;
          color: #2ed477;
        }
        .p {
          color: rgba(244, 99, 99, 0.988235294117647);
        }
      }
      .icon-yuyue {
        color: rgba(244, 99, 99, 0.988235294117647);
      }
      i {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 40px;
        height: 80%;
        color: #2ed477;
        flex: 3;
      }
    }
    .pay {
      border-radius: 5px;
      height: 80%;
      width: 48%;
      background-color: rgba(66, 212, 119, 0.19);
    }
  }
  .more {
    height: 56%;
    display: flex;
    justify-content: space-between;
    align-content: space-between;
    flex-wrap: wrap;
    .zi {
      flex-shrink: 0;
      border-radius: 5px;
      width: 23%;
      height: 46%;
      display: flex;
      flex-direction: column;
      box-shadow: 0 0 5px rgba(0.1, 0.1, 0.1, 0.1);
      i {
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 160%;
      }
      span {
        color: #fff;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(106, 135, 169, 0.996078431372549);
      }
    }
  }
}
</style>